<template>
	<view class="case">
		<uni-nav-bar
			left-icon="arrowleft"
			:fixed="true"
			:statusBar="true"
			title="巡检记录" 
			color="#fff" 
			background-color="#3a8fed"
			@clickLeft="back">
			<block slot="right">
				<view class="nav-bar-btns">
					<view class="nav-bar-btns-item">
						<view class="nav-bar-btn" @tap="openCondition">
							<image 
								class="nav-bar-btn-icon" 
								mode="aspectFit" 
								src="@/static/icon/icon_filter.png">
							</image>
						</view>
					</view>
				</view>
			</block>
		</uni-nav-bar>
		
		<view class="panel">
			<view class="panel-header">
				<view class="list list-a">
					<view class="list-group">
						<view class="list-item card card-a">
							<view class="card-header text-gold">
								<view class="card-header-mid">
									<text>{{ reportNum.reportBaseNmnb }}</text>
									<view class="card-header-rig">件</view>
								</view>
							</view>
							<view class="card-body">累计上报问题媒体</view>
						</view>
						<view class="list-item card card-a">
							<view class="card-header text-primary">
								<view class="card-header-mid">
									<text>{{ reportNum.reportBaseDate  }}</text>
									<view class="card-header-rig">件</view>
								</view>
							</view>
							<view class="card-body">今日上报问题媒体</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="panel-body list list-b">
				<view class="list-group">
					<view class="list-item card card-b" v-for="(record, index) in records" :key="index">
						<view class="card-header" @tap="viewPic(record.path)">
							<image class="img" :src="record.path[0]"></image>
						</view>
						<view class="card-body">
							<view class="card-group">
								<view class="card-item">
									<view class="card-item-header">地址：</view>
									<view class="card-item-body">{{ record.describe_address }}</view>
								</view>
								<view class="card-item">
									<view class="card-item-header">所在道路：</view>
									<view class="card-item-body">{{ record.road }}</view>
								</view>
								<view class="card-item">
									<view class="card-item-header">广告类别：</view>
									<view class="card-item-body">{{ record.media_type | getDictLabel(adTypes, 'dict_value')}}</view>
								</view>
								<view class="card-item">
									<view class="card-item-header">巡检类型：</view>
									<view class="card-item-body">{{ record.report_type | getDictLabel(reportTypes, 'dict_value') }}</view>
								</view>
								<view class="card-item">
									<view class="card-item-header">巡检时间：</view>
									<view class="card-item-body">{{ record.report_time }}</view>
								</view>
							</view>
						</view>
						
						<button class="card-btn" @tap="openDel(record)">详情</button>
					</view>
				</view>
				<uni-load-more :status="status"></uni-load-more>
			</view>
		</view>
		
		<condition ref="condition" :condition="conditionData" @changeParams="getOtherParams"></condition>
		<modal ref="detail" :value="record"></modal>
	</view>
</template>

<script>
	import { queryReportBaseNmnb, queryInspectionRecord, getDicts, queryInspectionDetails } from '@/api/configure.js';
	import { deepClone, getToken, toLogin, cleanData, mergeUrls, getDictLabel, previewImage} from '@/util/util.js';
	import Condition from '@/components/condition/case.vue';
	import Modal from './detail.nvue';
	import configUrl from '@/util/url.js';
	
	export default {
		components: {Condition, Modal},
		data() {
			return {
				pageNum: 1,
				pageSize: 5,
				total: 100,
				status: 'more',
				records: [],
				record: {},
				reportNum:{
					reportBaseDate: 0,
					reportBaseNmnb: 0
				},
				conditionData: [{
					type: 'cals',
					field: 'reportTime',
					label: '巡检时间',
					value: [],
					beginDate: '',
					endDate: ''
				},{
					type: 'select',
					field: 'reportType',
					label: '上报类型',
					value: '',
					index: '',
					options: []
				},{
					type: 'select',
					field: 'dealStatus',
					label: '问题状态',
					value: '',
					index: '',
					options: []
				},{
					type: 'input',
					field: 'road',
					label: '道路名称',
					value: '',
				},{
					type: 'input',
					field: 'buildingPointName',
					label: '点位名称',
					value: ''
				}],
				otherParams: {},
				adTypes:[],
				reportTypes: [],
				dealStatuses: [],
				emergencyStatuses: []
			}
		},
		methods: {
			openCondition() {
				this.$refs.condition.open();
			},
			closeCondition() {
				this.$refs.condition.close();	
			},
			openWin(url) {
				uni.navigateTo({
					url: url
				});
			},
			async getReportNum() {
				let { data } = await queryReportBaseNmnb();
				
				this.reportNum.reportBaseDate = data.reportBaseDate;
				this.reportNum.reportBaseNmnb = data.reportBaseNmnb;
			},
			async getRecords() {
				let records = [];
				
				let params = {
					pageNum: this.pageNum,
					pageSize: this.pageSize
				};
				
				Object.assign(params, this.otherParams);
				
				let {rows, total, code} = await queryInspectionRecord(params);
				
				if (code == 200) {
					let records = rows.slice(0);
					
					records = records.map( item => {
						let urls = [];
						
						if(item.path) {
							if (item.path.indexOf(",") == -1) {
								urls = [`${configUrl.CASEIMAGE_URL}${item.path}`];
							} else {
								urls = item.path.split(',').map((url) => `${configUrl.CASEIMAGE_URL}${url}`);
							}
						}
						
						
						item.path = urls;
						
						return item;
					} )
					
					this.total = total;
					
					if (this.pageNum * this.pageSize >= this.total) {
						this.status = "noMore";
					} else {
						this.status = "more";
					}
					
					
					this.records = [...this.records, ...records];
				}
			},
			async getDicts() {
				let ds = [
					getDicts({'type': 'dealStatus'}), //问题状态
					getDicts({'type': 'selectReportType'}), //上报类型
					getDicts({'type': 'selectAdType'}), //广告类别
					getDicts({'type': 'selectEmergencyStatus'}) //紧急状态
				];
			
				let dits = await Promise.all(ds);
				
				this.conditionData.forEach( item => {
					if(item.field == 'dealStatus'){
						
						item.options = dits[0]['data'].slice(0);
					} else if (item.field == 'reportType') {
						
						item.options = dits[1]['data'].slice(0);
					} else {
						this.adTypes = dits[2]['data'].slice(0);
					}
				});
				
				this.dealStatuses = dits[0]['data'].slice(0);
				this.reportTypes = dits[1]['data'].slice(0);
				this.emergencyStatuses = dits[3]['data'].slice(0);
			},
			collectOtherParams(res) {
				let otherParams = {};
				
				res.forEach( item => {
					if (item.field == 'reportTime') {
						otherParams['reportTimeBegin'] = item.value[0] || '';
						otherParams['reportTimeEnd'] = item.value[1] || '';
					} else {
						otherParams[item.field] = item.value;
					}
				});
				
				otherParams = cleanData(otherParams);
				
				return otherParams;
			},
			async getOtherParams(res) {
				this.otherParams = this.collectOtherParams(res);
				this.resetPage();
				this.getRecords();
				this.closeCondition();
			},
			async openDel({id}) {
				let params = {id: id};
					
				let { data } = await queryInspectionDetails(params);
				
				let record = {};
				
				Object.keys(data).forEach( key => {
					if (key == 'dealStatus') {
						record[key] = getDictLabel(data[key], this.dealStatuses, 'dict_value');
					} else if (key == 'emergencyStatus') {
						record[key] = getDictLabel(data[key], this.emergencyStatuses, 'dict_value');
					} else if (key == 'reportType') {
						record[key] = getDictLabel(data[key], this.reportTypes, 'dict_value');
					} else if(key == 'path'){
						let urls = [];
						
						if(data[key]){
							if (data[key].indexOf(",") == -1) {
								urls = [`${configUrl.CASEIMAGE_URL}${data[key]}`];
							} else {
								urls = data[key].split(',').map((url) => `${configUrl.CASEIMAGE_URL}${url}`);
							}
						}
						
						record[key] = urls;
					} else {
						record[key] = data[key];
					}
				})
				
				this.record = record;
				
				
				this.$refs.detail.open();
			},
			resetPage() {
				this.pageNum = 1;
				this.pageSize = 5;
				this.records = [];
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			async refreshPage() {
				await this.getReportNum();
				await this.getRecords();
			},
			
			async viewPic(urls) {
				let obj = {
					current: 0,
					urls: urls
				}
				
				previewImage(obj);
			},
			
			async init() {
				await this.getDicts();
				await this.refreshPage();
			}
		},
		async onLoad() {
			this.init();
		},
		onReady() {},
		onReachBottom() {
			if (this.pageNum * this.pageSize >= this.total) {
				this.status = "noMore";
				return;
			} else {
				this.pageNum = this.pageNum + 1;
				this.status = 'loading';
			}
		
			setTimeout(() => {
				this.getRecords();
			}, 300);
		},
		onPullDownRefresh() {}
	}
</script>

<style lang="scss">
	.nav-bar-btns{
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		width: 100px;
	}
	
	.nav-bar-btns-item{
		margin: 0px 6px;
		height: 44px;
		width: 44px;
	}
	
	.nav-bar-btn{
		height: 44px;
		width: 44px;
	}
		
	.nav-bar-btn-icon{
		margin: 10px;
		height: 24px;
		width: 24px;
	}
	
	.panel{
		padding: 23rpx 21rpx 0rpx;
		.panel-header{
			margin-bottom: 28rpx;
			padding: 29rpx 0rpx 28rpx 0rpx;
			background-color: #ffffff;
			border-radius: 19rpx;
		}
		.panel-body{
			
		}
	}
	.list{
		&.list-a{
			.list-group{
				display: flex;
				.list-item{
					width: 50%;
				}
			}
		}
		&.list-b{
			.list-group{
				.list-item{
					margin-bottom: 25rpx;
				}
			}
		}
	}
	
	
	.card{
		&.card-a{
			.card-header{
				margin-bottom: 4rpx;
				font-size: 60rpx;
				line-height: 72rpx;
				text-align: center;
				.card-header-mid{
					display: inline-block;
					padding: 0rpx 30rpx;
					position: relative;
					top: 0rpx;
					left: 0rpx;
					.card-header-rig{
						font-size: 24rpx;
						line-height: 30rpx;
						position: absolute;
						bottom: 8rpx;
						right: 0rpx;
					}
				}
			}
			.card-body{
				font-size: 26rpx;
				line-height: 32rpx;
				text-align: center;
				color: #5e5e5e;
			}
		}
		&.card-b{
			padding: 29rpx 22rpx 57rpx 36rpx;
			border-radius: 19rpx;
			background-color: #ffffff;
			display: flex;
			position: relative;
			top: 0rpx;
			left: 0rpx;
			.card-header{
				width: 199rpx;
				height: 189rpx;
				.img{
					width: 199rpx;
					height: 189rpx;
				}
			}
			.card-body{
				width: calc(100% - 199rpx);
			}
			
			.card-group{
				padding: 0rpx 0rpx 0rpx 15rpx;
				.card-item{
					margin-bottom: 6rpx;
					font-size: 26rpx;
					line-height: 32rpx;
					color: #878787;
					display: flex;
					.card-item-header{
						width: 130rpx;
					}
					.card-item-body{
						width: calc(100% - 130rpx);
					}
				}
			}
			
			.card-btn{
				position: absolute;
				bottom: 16rpx;
				right: 22rpx;
				width: 118rpx;
				height: 39rpx;
				padding: 5rpx 0rpx;
				border-radius: 12rpx;
				font-size: 24rpx;
				line-height: 29rpx;
				color: #ffffff;
				background: none;
				background-image: linear-gradient(to right, #44afee, #3a8eed);
			}
		}
	}
</style>
